<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li{list-style: none;}
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <!-- v-for 遍历数据过程中 会得到循环的当前值 => 只能在遍历的元素内使用(作用域) -->
            <!-- <li v-for="item in list">
                {{item}}
            </li> -->

            <!-- <li v-for="(item,index) in list">
                {{item}} ---- {{index}}
            </li> -->

            <li v-for="(item,index) of list">
                {{item}} ---- {{index}}
            </li>
        </ul>

        <hr>
        <h2>遍历对象</h2>
        <ul>
            <li v-for="(val,key) in obj">
                {{key}} ---- {{val}}
            </li>
        </ul>
        <ul>
            <li v-for="(val,key,index) in obj">
                {{index}} ---- {{key}} ---- {{val}}
            </li>
        </ul>
        <hr>
        <h2>生成100个li</h2>
        <ul>
            <!-- <li v-for="n in 100">
                {{n}}
            </li> -->
            <li v-for="(n,i) in 100">
                {{n}}---{{i}}
            </li>
        </ul>
     
    </div>
</body>
<script>
    // v-for 列表渲染
    // 用 v-for 把一个数组对应为一组元素  
    // 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

    // 注意: v-for 不仅可以遍历数组,还可以遍历 对象 数值

    // 遍历数组
    // v-for="item in list"
    // v-for="(item,index) in list"

    // v-for="item of list"
    // v-for="(item,index) of list"


    // list 被遍历的数组/对象
    // item  循环的当前元素
    // index  循环的当前下标


    // 遍历对象
    // v-for="val in list"
    // v-for="(val,key) in list"
    // v-for="(val,key,index) in list"

    // 数值
    // v-for="n in 100"   //自1开始
    // v-for="(n,i) in 100"

 

    var vm = new Vue({
        el:"#app",
        data:{
            list:[1,4,7,2,5,8,3,6,9],
            obj:{
                name:"张三",
                age:18,
                height:"177cm",
                weight:"70kg",
            }
        },
    })






</script>
</html>